<template>
  <div class="home-container page-container">
    <div class="page-title">vue3体验</div>
    <el-row>
      <el-button type="primary" plain @click="refresh">刷新数据</el-button>
    </el-row>
    <el-table
      :data="arr.endTableData"
      border
      style="width: 100%"
      size="mini"
      height="447px"
      :header-cell-style="{ background: '#ccc' }"
    >
      <el-table-column type="index" label="序号" width="80">
        <template #default="scope">
          <span>{{ scope.$index + 1 + arr.number * 10 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="投稿时间" width="180" />
      <el-table-column prop="name" label="游戏名称" width="180" />
      <el-table-column prop="address" label="游戏区服" />
      <el-table-column prop="strength" label="段位" />
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <el-button size="mini" type="text" @click="edit(scope.row, scope.$index)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleSizeChange"
      layout="prev, pager, next, total"
      :total="tableDatas.length"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'Home',
  setup() {
    const tableData = [
      {
        date: '2016-05-02',
        name: '古秋儿',
        address: '黑色玫瑰',
        strength: '璀璨钻石Ⅱ'
      },
      {
        date: '2016-05-04',
        name: '队友全孤儿怎么打',
        address: '德玛西亚',
        strength: '璀璨钻石Ⅲ'
      },
      {
        date: '2016-05-01',
        name: '爷傲丿奈我何',
        address: '峡谷之巅',
        strength: '英勇黄铜Ⅰ'
      },
      {
        date: '2016-05-03',
        name: '镜花水月',
        address: '艾欧尼亚',
        strength: '傲世宗师'
      },
      {
        date: '2016-05-03',
        name: '照片能留住什么',
        address: '艾欧尼亚',
        strength: '最强王者'
      },
      {
        date: '2016-05-02',
        name: '天线宝宝',
        address: '黑色玫瑰',
        strength: '璀璨钻石Ⅱ'
      },
      {
        date: '2016-05-04',
        name: '峡谷秃头美少女',
        address: '德玛西亚',
        strength: '璀璨钻石Ⅲ'
      },
      {
        date: '2016-05-01',
        name: '你能拿我怎么样',
        address: '峡谷之巅',
        strength: '英勇黄铜Ⅰ'
      },
      {
        date: '2016-05-03',
        name: 'kpl第一vn',
        address: '艾欧尼亚',
        strength: '傲世宗师'
      },
      {
        date: '2016-05-03',
        name: '你也觉得惋惜吗',
        address: '艾欧尼亚',
        strength: '最强王者'
      },
      {
        date: '2016-05-01',
        name: '她已经离开了',
        address: '峡谷之巅',
        strength: '英勇黄铜Ⅰ'
      },
      {
        date: '2016-05-03',
        name: '向着答案猛攻',
        address: '艾欧尼亚',
        strength: '傲世宗师'
      },
      {
        date: '2016-05-03',
        name: '怀念前任的温柔',
        address: '艾欧尼亚',
        strength: '最强王者'
      }
    ]
    const arr = reactive<any>({
      arrs: [1, 2, 3, 4],
      endTableData: [],
      name: ['124', '124422'],
      number: 0
    })
    const names = [
      '算了就这样吧',
      '颓废下去又能怎样',
      '怎么样才能找回她',
      '为自己赎罪',
      '一人一房一猫一狗',
      '怀念前任的温柔',
      '你又能做到哪步',
      '她已经离开了',
      '去年房间不只有我',
      '他真的有那么好吗',
      '也许早该如此',
      '当初你说了永远',
      '天角微亮',
      '向着答案猛攻',
      '你也觉得惋惜吗',
      '最温暖的怀抱',
      '忘掉卑微的时间',
      '阳光真的很温暖',
      '我已心满意足',
      '说实话从未后悔',
      '连你也不支持我吗',
      '你曾经真的很迷人',
      '80万也娶不到你吗',
      '没你我度日如年',
      '我怕来不及',
      '其实想过你会走',
      '你总是遥不可及',
      '做的都是无用功吗',
      '我会去向何方',
      '和你有关系吗'
    ]
    const edit = (value: any, index: number) => {
      arr.endTableData[index].name = names[Math.ceil(Math.random() * names.length - 1)]
    }
    const tableDatas = [
      ...tableData,
      ...tableData,
      ...tableData,
      ...tableData,
      ...tableData
    ]
    const spliceDate = () => {
      arr.endTableData = tableDatas.slice(0, 10)
    }
    const handleSizeChange = (val: number) => {
      arr.endTableData = tableDatas.slice((val - 1) * 10, val * 10)
      arr.number = val - 1
    }
    const refresh = () => {
      window.location.reload()
    }
    spliceDate()
    return {
      tableDatas,
      edit,
      refresh,
      handleSizeChange,
      spliceDate,
      arr
    }
  }
})
</script>

<style scoped lang="stylus">
.home-container {
  .vue-element-plus-logo {
    width 50%
  }
  .el-pagination{
    display flex
    align-items center
    justify-content flex-end
    margin 30px 0 10px
  }
}
</style>
